<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>Element对象对应网页的HTML元素。每一个HTML元素，在DOM树上都会转化成一个Element节点对象(以下简称元素节点)</p>
    
    <div class="box" id="root">Hello</div>
    <script>
    // Element.id
    // Element.i.d属性返回指定元素的id属性，该属性可读写
    // //HTML代码为<pid="foo">
    // var p = document.queryselector('p');
    // p.id //"foo"

    var root = document.getElementById("root");
    console.log(root.id);//打印出id
    root.id = "roots";//修改id为roots
    console.log(root.id);
    

    // Element.className I
    // className属性用来读写当前元素节点的class属性。它的值是一个字符串，每个class之间用空格分割
    // //HTML<div class="one two three"id="myDiv"></div>
    // var div = document.getElementById('myDiv');
    // div.className

    console.log(root.className);  //返回box
    root.className = "boxs";  //修改class为boxs 可以用于修改style中使用的某些标签的样式
    

    // Element.classList
    // classList对象有下列方法
    //     add():增加一个class。
    //     remove():移除一个class。
    //     contains():检查当前元素是否包含某个class。.
    //     toggle():将某个class移入或移出当前元素。
    // var div = document.getElementById('myDiv');
    // div.classList.add('myCssclass');
    // div.classList.add('foo','bar');
    // div.classList.remove('mycssclass');
    // div.classList.toggle('mycssclass');//如果myCssC1ass不存在就加入，否则移除
    // div.classList.contains('mycssclass');//返true或者false

    console.log(root.classList.add("mybox"));//添加一个class属性
    root.classList.remove("boxs");// 移除boxs
    if(root.classList.contains("mybox")){
        console.log("有");
        
    }else{
        console.log("没有");
        
    }
    
    // Element.innerHTML
    // Element.innerHTML属性返回一个字符串，等同于该元素包含的所有HTML代码。该属性可读写，常用来设置某个节点的内容。它能改写所有元素节点的内容，包括<HTML>和<body>元素
    // el.innerHTML = ''

    console.log(root.innerHTML);//直接读取
    console.log(root.innerHTML = "大家好！");//设置内容 把Hello设置成（覆盖）“大家好！”
    
    // Element.innerText
    // innerText和innerHTML类似，不同的是innerText无法识别元素，会直接渲染成字符串
    console.log(root.innerText = "大家好吗？");

    //innerHTML和innerText的区别：
    //innerHTML可以识别标签
    //innerText会把标签识别成一个字符串

    var str = "<a href='https://www.itbaizhan.com'>百战</a>";
    root.innerHTML = str;
    // root.innerText = str;

    </script>
</body>
</html>